<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>新增菜单</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <div th:replace="comm/page::layui_css"/>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <form class="layui-form" action="">
            <input name="id" type="hidden" th:value="${menu?.id}">
            <input name="status" type="hidden" th:value="1">
            <div class="layui-form-item">
                <label class="layui-form-label">图标</label>
                <div class="layui-input-block">
                    <input type="text" name="icon" id="icon" lay-filter="icon" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-block">
                    <input type="text" name="title" required lay-verify="required"
                           lay-reqtext="名称是必填项，岂能为空？" autocomplete="off"
                           placeholder="请输入名称" class="layui-input"
                           th:value="${menu?.title}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">URL</label>
                <div class="layui-input-block">
                    <input type="text" name="href"
                           placeholder="请输入url" autocomplete="off" class="layui-input"
                           th:value="${menu?.href}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">权限</label>
                <div class="layui-input-block">
                    <input type="text" name="perm"
                           placeholder="请输入权限标识" autocomplete="off" class="layui-input"
                           th:value="${menu?.perm}">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="pid" class="layui-form-label">上级</label>
                <div class="layui-input-block">
                    <input type="text" id="pid" name="pid" lay-filter="pid" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="actionType" value="0" title="目录" th:attr="checked=${menu.actionType==0}">
                    <input type="radio" name="actionType" value="1" title="菜单"
                           th:attr="checked=${menu.actionType==1}">
                    <input type="radio" name="actionType" value="2" title="按钮" th:attr="checked=${menu.actionType==2}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-block">
                    <input type="number" name="sort" lay-verify="required|number"
                           placeholder="请输入排序" value="100" autocomplete="off" class="layui-input"
                           th:value="${menu?.sort}">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-filter="edit" lay-submit>确定</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div th:replace="comm/page::layui_script"/>
<script>
    var index = parent.layer.getFrameIndex(window.name);
    var pid = [[${menu.pid}]];
    var icon = "[[${menu.icon}]]";
    layui.use(['iconPicker', 'form', 'layedit', 'laydate', 'treeSelect'], function () {
        var form = layui.form
            , iconPicker = layui.iconPicker
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            , treeSelect = layui.treeSelect;
        iconPicker.checkIcon('icon', icon);
        iconPicker.render({
            elem: '#icon',
            type: 'fontClass',
            search: true,
            page: true,
            limit: 12,
            click: function (data) {
                icon = data.icon;
            },
            success: function (d) {
                console.log(d);
            }
        });

        treeSelect.render({
            // 选择器
            elem: '#pid',
            // 数据
            data: '/menu/getTrees',
            // 异步加载方式：get/post，默认get
            type: 'get',
            // 占位符
            placeholder: '占位符',
            // 是否开启搜索功能：true/false，默认false
            // search: true,
            style: {
                folder: {
                    enable: false
                },
                line: {
                    enable: true
                }
            },
            // 点击回调
            click: function (d) {
                console.log(d);
                pid = d.current.id;
            },
            // 加载完成后的回调函数
            success: function (d) {
                treeSelect.checkNode('pid', pid);
            }
        });

        form.on('submit(edit)', function (ret) {
            var data = ret.field;
            data.pid = pid;
            data.icon = data.icon ? ("layui-icon " + data.icon) : icon;
            $.post("/menu/edit", data, function (e) {
                if (e.code === 0) {
                    layer.msg(e.msg);
                    // parent.layer.msg('您将标记 [ ' +val + ' ] 成功传送给了父窗口');
                    index && parent && parent.layer && parent.layer.close(index);
                    parent && parent.refreshView && parent.refreshView();

                } else {
                    layer.msg(e.msg);
                }
            });
            return false;
        });
    });
</script>

</body>
</html>